<template>
  <div id="app">
    <main-header></main-header>
    <div class="container">
      <sideNav class="nav"></sideNav>
      <router-view class="view"></router-view>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
import sideNav from './components/side-nav.vue'
import mainFooter from './components/footer.vue'
import mainHeader from './components/header.vue'
export default {
  name: 'App',
  components: {
    sideNav,
    mainFooter,
    mainHeader
  }
}
</script>

<style lang="stylus" scoped>
  @import "./assets/css/index.styl";
  .container
    margin: 48px auto;
    width: 90%;
    background-color: #fff;
    box-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
  .nav
    float: left;
    width: 165px;
  .view
    float: left;
    width: 80%;
    padding: 32px 48px 48px;
    box-sizing: border-box;

  .container:after
    content: "";
    clear: both;
    display: block;
</style>
